<template>
	<button @click="btnComponent" class="btn hover">{{ name }}</button>
</template>

<script setup>
	// 组件传值
	const props = defineProps({
		name: {
			default: "Button",
			type: String
		}
	});
	// 这个是提前声明 函数
	let emit = defineEmits(["btnComponent"]);
	// 向父组件传递一个函数
	const btnComponent = () => {
		emit("btnComponent");
	};
</script>
<style scoped lang="scss">
	.btn {
		width: 100%;
		height: 100%;
		margin: 0.5em;
		background: black;
		color: white;
		border: none;
		border-radius: 0.625em;
		font-size: 20px;
		font-weight: bold;
		cursor: pointer;
		position: relative;
		z-index: 1;
		overflow: hidden;
		box-sizing: border-box;
	}

	button:hover {
		color: black;
		box-sizing: border-box;
	}

	button:after {
		content: "";
		background: white;
		position: absolute;
		z-index: -1;
		left: -20%;
		right: -20%;
		top: 0;
		bottom: 0;
		transform: skewX(-45deg) scale(0, 1);
		transition: all 0.5s;
		box-sizing: border-box;
	}

	button:hover:after {
		transform: skewX(-45deg) scale(1, 1);
		-webkit-transition: all 0.5s;
		transition: all 0.5s;
		box-sizing: border-box;
	}
</style>
